---
import { getCollection } from "astro:content";
import { SITE } from "@config";
import Layout from "@layouts/Layout.astro";
import Main from "@layouts/Main.astro";
import Footer from "@components/astro/UI/Footer.astro";
import SearchBar from "@components/react/UI/Search";

// Retrieve all articles
const posts = await getCollection("blog", ({ data }) => !data.draft);

// List of items to search in
const searchList = posts.map(({ data}) => ({
  title: data.title,
  description: data.description,
  data
}));
---

<Layout activeNav="search" title={`Search | ${SITE.title}`}>
  <Main pageTitle="Search" pageDesc="搜索文章 ...">
    <SearchBar client:load searchList={searchList} />
  </Main>
  <Footer />
</Layout>
